<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --area-color: #2753F5
        }

        body {
            background: #90ADF9
        }

        .arealight {
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            user-select: none;
            background-image: conic-gradient(from 90deg at 70% 50%, white, var(--area-color)), conic-gradient(from
            270deg at 30% 50%, var(--area-color), white);
            -webkit-mask-image: radial-gradient(100% 50% at center center, black, transparent);
            background-position-x: 0%, 100%;
            background-position-y: 0%, 0%;
            background-size: 50% 100%, 50% 100%;
            transform: rotate(180deg) translate3d(0,0,0);
            transform-origin: center center;
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div class="arealight"></div>
</body>
</html>